<template>
  <view class="build-group">
    <view class="f">
      <view class="top">
        <span class="back" @click='back'>
          <span class="back">取消</span>
        </span>
        <span class="title">邀请好友</span>
      </view>
    </view>

    <view class="main">
      <view class="title">用户</view>

      <view class="friends">
        <view class="user" v-for='(item,index) in info.friendlist' :key="index" @click="selectFriend(item)">
          <view class="selected" :class="{isselected:item.selected}">
            <image src="../../static/images/group/choose.png" class="selected-img" v-if="item.selected" mode=""></image>
          </view>
          <image class="user-img" :src="item.imgurl" mode=""></image>
          <view class="name" v-if="item.nickname != null">{{item.nickname}} </view>
          <view class="name" v-else>{{item.username}} </view>
        </view>
      </view>
    </view>

    <view class="btn">
      <view class="bottom-btn">
        <button @click="submit" type='default' :disabled="selectedNum == 0 ">邀请
          <span v-show="selectedNum !=0">({{selectedNum}})</span></button>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    reactive,
    getCurrentInstance,
    computed
  } from 'vue'
  import {
    useUserStore
  } from '@/store/user.js'
  import {
    useGroupStore
  } from '@/store/group.js'
  import {
    onLoad,
  } from '@dcloudio/uni-app'
  import {
    requestNet
  } from '@/api/base.js'
  const user = useUserStore()
  const instance = getCurrentInstance()

  let info = reactive({
    groupid: null,
    seletctedUser: [], //已选择好友id数组
    friendlist: [], //好友列表
    groupMember: [], //群成员
  })
  const userInfo = reactive({
    myid: null, //登录用户id
    token: ''
  })
  //统计选择人数
  let selectedNum = computed({
    set(value) {},
    get() {
      let num = 0
      for (let i = 0; i < info.friendlist.length; i++) {
        if (info.friendlist[i].selected) {
          num++
        }
      }
      return num
    }
  })

  //获取当前用户缓存信息
  function getNowUserInfo() {
    userInfo.myid = user.userinfo.userid
    userInfo.token = user.token
  }

  function back() {
    uni.navigateBack({
      delta: 1
    })
  }

  //获取群成员数据
  function getGroupMember() {
    requestNet({
      url: '/group/getgroupmember',
      data: {
        gid: info.groupid
      },
      method: 'GET',
      header: {
        token: userInfo.token
      }
    }).then(res => {
      let code = res.data.code
      let result = res.data.data
      if (code == 200) {
        info.groupMember = result
        for (let i = 0; i < result.length; i++) {
          info.groupMember[i].imgurl = instance.proxy.serverUrl + info.groupMember[i].imgurl
        }
      }
    }).catch(err => {
      uni.showToast({
        title: err,
        icon: 'error'
      })
    })
  }

  //获取好友用户数据
  function getFriendList() {
    requestNet({
      url: '/home/getUserList',
      data: {
        uid: userInfo.myid,
        state: 0
      },
      header: {
        token: userInfo.token
      }
    }).then(res => {
      let code = res.data.code
      if (code == 200) {
        info.friendlist = res.data.data
        let temp = info.friendlist
        if (temp.length > 0) {
          for (let i = 0; i < temp.length; i++) {
            temp[i].selected = false
            if (!temp[i].imgurl.includes(instance.proxy.serverUrl)) { //不包含服务器地址
              info.friendlist[i].imgurl = `${instance.proxy.serverUrl}${temp[i].imgurl}`
            }
          }
        }
      }
    }).catch(err => {
      uni.showToast({
        title: err,
        icon: 'error'
      })
    })
  }

  //邀请好友
  function submit() {
    //添加到被选择好友数组中
    for (let i = 0; i < info.friendlist.length; i++) {
      if (info.friendlist[i].selected) {
        info.seletctedUser.push(info.friendlist[i])
        requestNet({
          url: '/group/addgroup',
          method: 'POST',
          data: {
            groupid: info.groupid,
            userid: info.friendlist[i].id,
          },
          header: {
            token: userInfo.token
          }
        }).then(res => {
          let code = res.data.code
        }).catch(err => {
          uni.showToast({
            title: err,
            icon: 'error'
          })
        })
      }
    }
    uni.showToast({
      title: '邀请成功',
      icon: 'success'
    })
    //跳转到群详细页
    setTimeout(() => {
      uni.navigateBack({
        delta: 1
      })
    }, 2000)

  }

  //动态选择好友
  function selectFriend(item) {
    item.selected = !item.selected
  }

  onLoad((e) => {
    if (e != null) {
      info.groupid = parseInt(e.gid)
    }
    getNowUserInfo()
    getFriendList()
    getGroupMember()
  })
</script>

<style lang="scss" scoped>
  @import '@/assets/css/main.scss';

  .build-group {
    padding: 0 20rpx;

    .f {
      width: 95%;
      position: fixed;
      z-index: 100;
    }

    .top {
      position: relative;
      display: flex;
      align-items: center;
      height: 88rpx;
      border-bottom: 2rpx solid var(--text-color-grey);
      background-color: $uni-bg-color-grey;

      .back {
        display: inline-block;
        height: 60rpx;
        width: 60rpx;
        line-height: 60rpx;
        font-weight: 700;
      }

      .title {
        position: absolute;
        //居中显示
        transform: translateX(-50%);
        left: 50%;
        font-size: 36rpx;
        font-weight: 700;
      }
    }

    .main {
      display: flex;
      flex-direction: column;

      .title {
        padding-top: 100rpx;
        font-size: 44rpx;
        font-weight: 600;
        line-height: 40px;
      }

      .friends {
        padding: 20rpx 40rpx;

        .user {
          display: flex;
          flex-direction: row;
          align-items: center;
          height: 120rpx;

          .selected {
            flex: none;
            margin-right: 30rpx;
            width: 48rpx;
            height: 48rpx;
            background: #f0f072;
            border-radius: 24rpx;
            position: relative;

            &-img {
              width: 30rpx;
              height: 20rpx;
              position: absolute;
              left: 10rpx;
              top: 15rpx;
            }
          }

          .user-img {
            flex: none;
            width: 80rpx;
            height: 80rpx;
          }

          .name {
            margin-left: 30rpx;
            font-size: 32rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
          }
        }

      }
    }
  }

  .btn {
    box-shadow: 0px 1px 0 rgba(0, 0, 0, .25);
    margin: 0 20rpx;

    .bottom-btn {
      position: fixed;
      bottom: 30rpx;
      width: 90%;
    }
  }

  .isselected {
    background: rgba(255, 228, 49, 1) !important;
  }

  :deep(.is-input-border[data-v-abe12412]) {
    border-color: #e1e1e1 !important;
    border-radius: 46px;
    text-align: center;
  }

  :deep(.content-clear-icon[data-v-abe12412]) {
    color: rgb(192, 196, 204) !important;
  }

  .image-cropper[data-v-6592bb66] {
    z-index: 1;
  }

  uni-button[type='default'] {
    border-radius: 20px;
    background-color: #f0d32e;
  }

  .noselect {
    background: #d9d9d9 !important;
  }
</style>
